<script setup name="category">
import { ref } from "vue"
import { getCategoryList, createCategory, updateCategory, updateCategoryStatus, deleteCategory } from "@/api/category"
import { useInitTable, useInitForm } from "@/composables/useCommon"
import ListHeader from "@/components/ListHeader.vue"
import FormDialog from "@/components/FormDialog.vue"
import Gooddialog from "./components/GoodDialog.vue"

const { windowHeight, tableData, loading, getData, handleStatusChange, handleDelete } = useInitTable({
  getList: getCategoryList,
  delete: deleteCategory,
  updateStatus: updateCategoryStatus,
  onGetList: res => {
    tableData.value = res.map(v => {
      v.goodsLoading = false
      return v
    })
  }
})

// 解构表单公共方法
const { form, dialogRef, formRef, rules, dialogTitle, handleSubmit, handleCreate, handleEdit, resetForm } = useInitForm({
  getData,
  create: createCategory,
  updata: updateCategory,
  form: {
    name: ""
  },
  rules: {
    name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }]
  }
})

// 减去头部高度、标签高度、内边距高度
let h = windowHeight.value - 64 - 44 - 104
// 推荐商品弹窗节点
const goodRef = ref()
// 树状、级联组件配置
const defaultProps = {
  children: "child",
  label: "name",
  value: "id",
  checkStrictly: true,
  emitPath: false
}
// 打开推荐商品
const openGoodsDialog = data => {
  goodRef.value.open(data)
}
</script>

<template>
  <el-card shadow="never" :body-style="{ 'padding-bottom': '10px', 'padding-left': '0', 'padding-right': '0' }">
    <ListHeader @refresh="getData" @create="handleCreate" />
    <div class="tree" :style="{ height: `${h}px` }">
      <el-tree node-key="id" :data="tableData" :props="defaultProps" v-loading="loading">
        <template #default="{ data }">
          <div class="tree-body">
            <span>{{ data.name }}</span>
            <div class="tree-body-actions">
              <el-tooltip effect="light" content="推荐商品" placement="left">
                <el-icon :size="16" @click.stop="openGoodsDialog(data)">
                  <Plus />
                </el-icon>
              </el-tooltip>
              <el-switch :modelValue="data.status" size="small" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66" @change="handleStatusChange($event, data)" @click.stop />
              <span class="actions-icon">
                <el-icon :size="16" @click.stop="handleEdit(data)">
                  <Edit />
                </el-icon>
                <el-popconfirm title="是否要删除该商品分类？" width="200" confirmButtonText="确认" cancelButtonText="取消" @confirm="handleDelete(data.id, MouseEvent)">
                  <template #reference>
                    <el-icon :size="16">
                      <Close />
                    </el-icon>
                  </template>
                </el-popconfirm>
              </span>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <FormDialog ref="dialogRef" :width="50" :title="dialogTitle" @submit="handleSubmit" @close="resetForm">
      <el-form :model="form" ref="formRef" :rules="rules" :inline="false" label-width="90px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>
    </FormDialog>
    <Gooddialog ref="goodRef" />
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  border: 0;
  .tree {
    overflow: auto;
    :deep(.el-tree-node__content) {
      padding: 10px 0;
    }
    &-body {
      display: flex;
      flex: 1;
      padding-right: 8px;
      .el-tag {
        margin-right: 4px;
      }
      .el-icon {
        padding: 0 10px;
      }
      .el-switch {
        margin: 0 16px;
      }
      &-actions {
        margin-left: auto;
        .actions-icon {
          min-width: 84px;
        }
      }
    }
  }
  :deep(.el-cascader) {
    width: 100%;
  }
  :deep(.icon-select) {
    width: 100%;
  }
}
::-webkit-scrollbar {
  width: 0;
}

@media screen and (max-width: 375px), screen and (max-width: 414px) {
  .el-card {
    padding-bottom: 0;
    .el-tree {
      width: 90vw;
    }
    .el-icon {
      padding: 0 4px !important;
      &:last-child {
        padding-right: 0 !important;
      }
    }
    :deep(.el-card__body) {
      padding-left: 0;
      padding-right: 0;
    }
    :deep(.el-dialog--center) {
      min-width: 80% !important;
      max-width: 80% !important;
    }
    .el-switch {
      margin: 0 4px;
    }
  }
}
</style>
